import type { FormOptions } from '@/components/ui/form/src/types/type'

const menuFormOptions: FormOptions[] = [
  {
    type: 'select',
    value: 0,
    label: 'Parent Menu',
    prop: 'pid',
    placeholder: 'Please select the parent menu',
    attrs: {
      allowClear: true,
      style: {
        width: '100%',
      },
    },
    children: [
      {
        type: 'select-option',
        label: 'ROOT',
        value: 0,
      },
      {
        type: 'select-option',
        label: 'UserLayout',
        value: 1,
      },
      {
        type: 'select-option',
        label: 'BasicLayout',
        value: 2,
      },
    ],
  },
  {
    type: 'input',
    value: '',
    label: 'Menu Name',
    prop: 'name',
    tooltip: '如果父容器有name, 那么菜单显示的时候子菜单都会被收到这个菜单下面去',
    // required: 'name',
    attrs: {
      allowClear: true,
    },
    // rules: [
    //   {
    //     message: 'Please enter the name',
    //     required: true,
    //     trigger: 'blur',
    //   },
    // ],
  },
  {
    type: 'input',
    value: '',
    label: 'Menu Path',
    prop: 'path',
    required: 'path',
    attrs: {
      allowClear: true,
    },
    rules: [
      {
        message: 'Please enter the path',
        required: true,
        trigger: 'blur',
      },
    ],
  },
  {
    type: 'input',
    value: '',
    label: 'Redirect Path',
    prop: 'redirect',
    attrs: {
      allowClear: true,
    },
  },
  {
    type: 'input',
    value: '',
    label: 'meta title',
    prop: 'metaTitle',
    tooltip: '如果想在detail页面的面包屑中显示上级的标题, 父菜单需要设置meta.title, 其他情况不受限制',
    attrs: {
      allowClear: true,
    },
  },
  {
    type: 'input',
    value: '',
    label: 'meta icon',
    prop: 'metaIcon',
    attrs: {
      allowClear: true,
    },
  },
  {
    type: 'input',
    value: '',
    label: 'activeMenu',
    prop: 'metaActiveMenu',
    tooltip: '如果进入详情页时想让父级也高亮, 需要配置activeMenu为父菜单path表示需要当前高亮的菜单',
    attrs: {
      allowClear: true,
    },
  },
  {
    type: 'radio-group',
    value: 1,
    label: 'Menu status',
    prop: 'active',
    attrs: {
      allowClear: true,
    },
    children: [
      {
        type: 'radio',
        label: 'normal',
        value: 1,
      },
      {
        type: 'radio',
        label: 'disabled',
        value: 0,
      },
    ],
  },
]

export const menuConfig = {
  columns: [
    { align: 'center', dataIndex: 'pid', title: 'Parent Id' },
    { align: 'center', dataIndex: 'name', title: 'Menu Name' },
    { align: 'center', dataIndex: 'path', title: 'Menu path' },
    { align: 'center', dataIndex: 'redirect', title: 'Redirect path' },
    { align: 'center', dataIndex: 'metaTitle', title: 'meta title' },
    { align: 'center', dataIndex: 'metaIcon', title: 'meta icon' },
    { align: 'center', dataIndex: 'active', title: 'Menu status', customRender: ({ text }: { text: number }) => {
      return <a-switch checked={text === 1} disabled />
    } },
    // { align: 'center', dataIndex: 'createTime', title: 'CreateTime' },
    { align: 'center', dataIndex: 'updateTime', title: 'UpdateTime' },
    { dataIndex: 'action', title: 'Acticon' },
  ],
  text: {
    addBtn: 'New',
    addAction: 'New',
    addModalTitle: 'New Menu',
    editModalTitle: 'Update Menu',
    editAction: 'Edit',
  },
  options: menuFormOptions,
}

export const roleFormOptions: FormOptions[] = [
  {
    type: 'input',
    value: '',
    label: 'Name',
    prop: 'name',
    required: 'name',
    attrs: {
      allowClear: true,
    },
    rules: [
      {
        message: 'Please enter the name',
        required: true,
        trigger: 'blur',
      },
    ],
  },
  {
    type: 'input',
    value: '',
    label: 'Description',
    prop: 'description',
    required: 'description',
    attrs: {
      allowClear: true,
    },
    rules: [
      {
        message: 'Please enter the description',
        required: true,
        trigger: 'blur',
      },
    ],
  },
  {
    type: 'checkbox-group',
    value: [],
    label: 'Menu',
    prop: 'menu',
    children: [
      {
        type: 'checkbox',
        label: 'menu1',
        value: 'menu1',
      },
      {
        type: 'checkbox',
        label: 'menu2',
        value: 'menu2',
      },
    ],
  },
  {
    type: 'checkbox-group',
    value: [],
    label: 'Permissions',
    prop: 'permissions',
    children: [
      {
        type: 'checkbox',
        label: 'permission1',
        value: 'permission1',
      },
      {
        type: 'checkbox',
        label: 'permission2',
        value: 'permission2',
      },
    ],
  },
]

export const roleConfig = {
  columns: [
    { align: 'center', dataIndex: 'name', title: 'Name' },
    { align: 'center', dataIndex: 'description', title: 'Description' },
    // { align: 'center', dataIndex: 'createTime', title: 'CreateTime' },
    { align: 'center', dataIndex: 'updateTime', title: 'UpdateTime' },
    { dataIndex: 'action', title: 'Acticon' },
  ],
  text: {
    addBtn: 'New',
    addAction: 'New',
    addModalTitle: 'New Role',
    editModalTitle: 'Update Role',
    editAction: 'Edit',
  },
  options: roleFormOptions,
}

const permissionFormOptions: FormOptions[] = [
  {
    type: 'input',
    value: '',
    label: 'Code',
    prop: 'code',
    required: 'code',
    attrs: {
      allowClear: true,
    },
    rules: [
      {
        message: 'Please enter the code',
        required: true,
        trigger: 'blur',
      },
    ],
  },
  {
    type: 'input',
    value: '',
    label: 'Description',
    prop: 'description',
    required: 'description',
    attrs: {
      allowClear: true,
    },
    rules: [
      {
        message: 'Please enter the description',
        required: true,
        trigger: 'blur',
      },
    ],
  },
]

export const permissionConfig = {
  columns: [
    { align: 'center', dataIndex: 'code', title: 'Code' },
    { align: 'center', dataIndex: 'description', title: 'Description' },
    // { align: 'center', dataIndex: 'createTime', title: 'CreateTime' },
    { align: 'center', dataIndex: 'updateTime', title: 'UpdateTime' },
    { dataIndex: 'action', title: 'Acticon' },
  ],
  text: {
    addBtn: 'New',
    addAction: 'New',
    addModalTitle: 'New Permission',
    editModalTitle: 'Update Permission',
    editAction: 'Edit',
  },
  options: permissionFormOptions,
}
